import React from 'react'
import { useState, useEffect } from 'react'
import { SearchBar, } from 'antd-mobile'
// 引入列表组件
import ListCom from '@/components/ListCom'
// 引入样式
import '@/assert/home.scss'
// 引入首页数据接口
import { getListData } from '@/api/home'
// 导入数据类型
import { listItem } from '@/types/dataTypes'
import { useNavigate } from 'react-router-dom'
type Props = {}

export default function Home({ }: Props) {
  const navigate = useNavigate()
  const headFn = () => {
    localStorage.getItem('userid') ? navigate('/mine') : navigate('/login')
  }
  // 定义列表接口数据  是一个数组，里面包含有多个对象的形式，所以一开始定义为空数组，它的类型是对象数组：即Object[]
  const [listData, setListData] = useState<listItem[]>([])
  // 定义boolean，根据布尔值决定是否要重新请求数据
  const [hasMore, setHasMore] = useState(true)
  // 定义当前页，是第几页，默认是第一页
  const [page, setPage] = useState(1)
  async function loadMore() {
    const append = await getListData({ count: page, limitNum: 10 }) //异步数据，await等待异步的结果，这里将mockRequest替换成getListData数据请求
    console.log('append', append);
    // setListData修改数据的回调函数的写法，val就是原先的listData数据
    // ...val,数组展开表示新的数组，后面的...表示拼接，要拼接的数据是append下面的data下面的data数组
    setListData(val => [...val, ...append.data.data])
    // 只有当append.data.data的长度>0时候，即还存在数据的时候setHasMore才会显示为true，而为true才会滚动加载数据
    setHasMore(append.data.data.length > 0)
    // 重要的一点：修改当前的页数,否则永远都是第一页数据
    setPage(page + 1)
  }

  return (
    <div className='home'>
      {/* 头部 */}
      <div className='header'>
        <span>地址</span>
        <SearchBar
          placeholder='请输入内容'
          style={{
            '--background': '#ffffff', 'flex': 1, 'margin': ' 0 10px', '--height': '34px'
          }}
        />
        <span onClick={headFn}>{localStorage.getItem('userid') ? '我的' : '登录'}</span>
      </div>
      {/* 下拉更多商品列表 */}
      {/* 用户想看到新的数据时，可以上滑页面自动加载数据。
      当 hasMore 属性为 true 时，用户页面滚动到底部 threshold (默认为 250px)时无限滚动组件会调用定义的 loadMore 函数。 */}
      {/* 将loadMore函数和 hasMore,listData 数据传递给子组件*/}
      <ListCom loadMore={loadMore} hasMore={hasMore} listData={listData}></ListCom>
    </div>
  )
}